<template>
  <div>
    <el-row>
      <el-col :span="6">
        <el-card>
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div class="text item" style="width:100%">
            <div style="text-align:center"></div>
            <img :src="'http://101.43.223.224:8765/image/getImageById?id='+user.avatarUrl" style="width:120px;height:120px;border-radius:50%">
            <el-divider class="aaaa"></el-divider>
            <div><span>用户名</span><span style="float:right">{{user.userName}}</span></div>
            <el-divider class="aaaa"></el-divider>
            <div><span>手机号</span><span style="float:right">{{user.phone}}</span></div>
            <el-divider class="aaaa"></el-divider>
            <div><span>邮箱</span><span style="float:right">{{user.email}}</span></div>
            <el-divider class="aaaa"></el-divider>
            <div>
              <span>性别</span><span style="float:right" v-if="user.gender==1">男</span>
              <span>性别</span><span style="float:right" v-if="user.gender==2">女</span>
            </div>
            <el-divider class="aaaa"></el-divider>
            <div><span>地址</span><span style="float:right">{{user.address}}</span></div>
            <el-divider class="aaaa"></el-divider>
            <div><span>角色</span><span style="float:right">{{user.role}}</span></div>
            <el-divider class="aaaa"></el-divider>
          </div>
        </el-card>
      </el-col>
      <el-col :span="17">
        <el-card style="margin-left:20px">
          <div slot="header" class="clearfix">
            <span>基本信息</span>
          </div>
          <el-tabs v-model="activeName">
            <el-tab-pane label="基本信息" name="first">
              <el-form :model="userForm" ref="userForm" :rules="rules">
                <el-form-item label="用户昵称" prop="nickName">
                  <el-input v-model="userForm.nickName"> </el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                  <el-input v-model="userForm.phone"> </el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="userForm.email"> </el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                  <el-input v-model="userForm.address"> </el-input>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                  <el-radio v-model="userForm.gender" label="1">男</el-radio>
                  <el-radio v-model="userForm.gender" label="2">女</el-radio>
                </el-form-item>
              </el-form>
              <el-button type="primary" size="mini" style="width:80px" @click="saveInfo">保存</el-button>
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="second">
              <el-form :model="userLoginForm" ref="userLoginForm" :rules="rule">
                <el-form-item label="原密码" prop="oldPassword">
                  <el-input v-model="userLoginForm.oldPassword" show-password type="password"></el-input>
                </el-form-item>
                <el-form-item label="更改密码" prop="newPassword">
                  <el-input v-model="userLoginForm.newPassword" show-password type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                  <el-input v-model="userLoginForm.confirmPassword" show-password type="password"></el-input>
                </el-form-item>
              </el-form>
              <el-button type="primary" size="mini" style="width:80px" @click="savePassword">保存</el-button>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {},
      activeName: "first",
      userForm: {},
      userLoginForm: {},
      gender: 0,
      rule: {
        oldPassword: [
          { required: true, message: "请输入原密码", trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "请输入更改密码", trigger: "blur" },
        ],
        confirmPassword: [
          { required: true, message: "请确认密码", trigger: "blur" },
          { validator: this.validateConfirmPassword, trigger: "blur" },
        ],
      },
      rules: {
        nickName: [
          { required: true, message: "请输入用户昵称", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^[1][3-9]\d{9}$/,
            message: "请输入有效的手机号",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { type: "email", message: "请输入有效的邮箱", trigger: "blur" },
        ],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
      },
    };
  },
  mounted() {
    this.user = JSON.parse(localStorage.getItem("user"));
    this.selectUser();
    this.userForm.gender = 0;
  },
  methods: {
    selectUser() {
      this.$axios
        .get("/User/selectById", {
          params: {
            id: this.user.id,
          },
        })
        .then((res) => {
          if (res.data.flag) {
            this.userForm = res.data.data;
            this.user = res.data.data;
          } else {
            this.$message.error("warning", res.data.code);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    saveInfo() {
      this.$refs["userForm"].validate((valid) => {
        if (valid) {
          this.$axios
            .post("/User/updateInfo", this.userForm)
            .then((res) => {
              if (res.data.flag) {
                this.$message.success("保存成功");
                //刷新
                window.location.reload();
              } else {
                this.$message.error("warning", res.data.code);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          this.$message.warning("error sumbit !!");
        }
      });
    },
    savePassword() {
      this.$refs["userLoginForm"].validate((valid) => {
        if (valid) {
          this.userLoginForm.id = this.user.id;
          this.$axios
            .post(
              "/User/savePassword",
              this.userLoginForm
            )
            .then((res) => {
              if (res.data.flag) {
                this.$message.success("保存成功");
                //刷新
                this.$router.push("/login");
                localStorage.removeItem("user");
              } else {
                this.$message.error(res.data.data);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          this.$message.warning("error sumbit !!");
        }
      });
    },
    validateConfirmPassword(rule, value, callback) {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.userLoginForm.newPassword) {
        callback(new Error("确认密码与新密码不一致"));
      } else {
        callback();
      }
    },
  },
};
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 380px;
}
.aaaa {
  margin: 12px 0;
}
</style>